<template>
  <div style="width: 100%; height: 100%;position: relative">
    <div id="container" style="width: 100%; height: 100%"></div>
    <dv-digital-flop :config="config1" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)"/>
  </div>
</template>

<script>
// totalOfficePowerConsume 今年办公总耗电量 22000
// totalOfficeWaterConsume 今年办公总用水量 0
// totalPowerConsume 今年生产总耗电量 18890
// totalWaterConsume 今年生产总用水量 6400

// 能耗总数 四个+

import Charts from '@jiaminghi/charts'
import {currentGET} from "api";

export default {
  data() {
    return {
      config1: {
        number: [22000],
        toFixed: 2,
        content: '{nt}',
        style: {
          fontSize: 15,
          fill: '#3de7c9'
        }
      },

      option: {
        title: {
          text: '畅销饮料占比饼状图',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            data: [
              {name: '今年办公总耗电量', value: 22000},
              {name: '今年办公总用水量', value: 0},
              {name: '今年生产总耗电量', value: 18890},
              {name: '今年生产总用水量', value: 6400}
            ],
            radius: ['40%', '50%'],
            insideLabel: {
              show: true
            }
          }
        ]
      },
    }
  },
  methods: {
    init() {
      const container = document.getElementById('container')
      const myChart = new Charts(container)
      // 🔍 原型链查找过程：
      // 1. 先在 myChart 实例自身查找 setOption 方法
      // 2. 没找到 → 查找 Charts.prototype 原型对象
      // 3. 找到 → 执行 Charts.prototype.setOption()
      myChart.setOption(this.option)
      myChart.animationEnd = true
    },
    getConsume() {
      currentGET('big1').then(res => {
        const data = res.data[0]
        const consume = [
          {name: '今年办公总耗电量', value: data.totalOfficePowerConsume},
          {name: '今年办公总用水量', value: data.totalOfficeWaterConsume},
          {name: '今年生产总耗电量', value: data.totalPowerConsume},
          {name: '今年生产总用水量', value: data.totalWaterConsume}
        ]
        let totalConsume = null
        consume.forEach(item => {
          totalConsume += item.value
        })

        this.option = {
          ...this.option,
          series: [
            {
              type: 'pie',
              data: consume,
              radius: ['40%', '50%'],
              insideLabel: {
                show: true
              }
            }
          ]
        }

        this.config1 = {
          ...this.config1,
          number: [totalConsume],
        }
      })
    }
  },
  mounted() {
    this.init()
    this.getConsume()
    setInterval(this.getConsume, 5000)
  }
}
</script>

<style scoped>
/* 可以添加样式 */
</style>
